<template>
	<view class="withdraw-deposit">
		<view class="withdraw-deposit-detail">
			<view class="can-withdraw">
				<text>可提现金额</text>
				<text>￥{{withdrawal}}</text>
			</view>
			<view class="authentication-name">
				<text>认证姓名</text>
				<input v-model="username" class="name" type="text" placeholder="非常重要,请输入正确的姓名" placeholder-style="color:#AAA;font-size:28upx"/>
			</view>
			<view class="money">
				<text>金额</text>
				<input v-model="money" class="withdraw-money" type="digit" placeholder="金额需要在2-5000元之间" placeholder-style="color:#AAA;font-size:28upx"/>
			</view>
			<view @click="getMoney">
				提现
			</view>
		</view>
		<view class="explain">
			<view>
				<view style="width: 6upx;height: 32upx;background: #84D91C;border-radius: 3upx;margin-top: 4upx;"></view>
				<view style="margin-left: 14upx">
					提现说明
				</view>
			</view>
			<view>
				<text>1.单笔提现金额最低2元，最高5000元，每日累计不可超过5000元。</text>
				<text>2.提现到微信零钱，需要提供与当前微信实名认证一致的姓名，否则无法到账。</text>
				<text>3.提现一般1-3个工作日到账，请留意微信服务通知。如提现3天还没有到账，请联系“客服人员”。</text>
			</view>
		</view>
		<ending></ending>
		<!-- 提现成功提示 -->
		<uni-popup ref="applySucceedPopup" :custom="true">
			<view class="popup_box_de">
				<view class="popup_top_de">
					<view class="popup_title_de">申请提现成功</view>
					<view class="popup_title_de-tip">1-3个工作日到账</view>
				</view>
				<!-- 用户操作按钮 -->
				<view class="checkDeBtns">
					<view class="sureDeBtn" @click="sureDelete">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import ending from '../../../common/ending.vue'
	export default{
		components:{ending,uniPopup},
		data() {
			return {
				token: this.$store.getters.getToken,
				username: '',
				money: '',
				withdrawal: 0.00//可提现金额
			}
		},
		onLoad(options) {
			this.withdrawal = options.withdrawal
		},
		methods:{
			sureDelete(){
				this.$refs.applySucceedPopup.close()
				this.username = ''
				this.money = ''
				setTimeout(() => {
					uni.navigateBack({})
				},1000)
			},
			// 提现申请
			getMoney() {
				if(this.username=='') {
					uni.showToast({
						title: '认证姓名不能为空！',
						icon: 'none',
						duration: 2000
					})
					return false
				}else if(this.money=='') {
					uni.showToast({
						title: '请输入提现金额！',
						icon: 'none',
						duration: 2000
					})
					return false
				}else if(parseInt(this.money)<2||parseInt(this.money)>5000||parseInt(this.money)>parseInt(this.withdrawal)) {
					uni.showToast({
						title: '提现金额不正确！',
						icon: 'none',
						duration: 2000
					})
					return false
				}
				let data = {
					token: this.token,
					money: this.money,
					username: this.username
				}
				this.$api.apply_for_withdrawal(data).then(res => {
					if(res.status) {
						this.$refs.applySucceedPopup.open()
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
						setTimeout(() => {
							uni.navigateBack({})
						},1500)
					}
					console.log('提现申请',res)
				}).catch(err => {
					console.log('提现申请',err)
				})
			}
		}
	}
</script>

<style>
	.popup_box_de {
		width: 540upx;
		height: 336upx;
		border-radius: 24upx;
		background-color: #fff;
	}
	.popup_top_de {
		width: 100%;
		height: 224upx;
		box-sizing: border-box;
		padding: 50upx 48upx 46upx 48upx;
		border-bottom: 1upx solid rgba(0, 0, 0, 0.1);
	}
	.popup_title_de {
		color: #333;
		font-size: 34upx;
		text-align: center;
		font-weight: 550;
	}
	.popup_title_de-tip{
		text-align: center;
		font-size: 30upx;
		color: #FF5C46;
		margin-top: 36upx;
	}
	.checkDeBtns {
		height: 110upx;
		font-size: 34upx;
	}
	
	.sureDeBtn {
		width: 100%;
		height: 100%;
		line-height: 110upx;
		color: #00A66A;
		text-align: center;
	}
	
	.cancleDeBtn {
		width: 50%;
		height: 100%;
		text-align: center;
		line-height: 90upx;
		border-right: 2upx solid #DDDDDD;
	}
	page{
		position: absolute;
		top: 0;left: 0;right: 0;bottom: 0;
	}
	.withdraw-deposit{
		width: 100%;
		height: 100%;
		background: #F5F6F9;
		padding-top: 20upx;
		box-sizing: border-box;
	}
	.withdraw-deposit-detail{
		width: 100%;
		height: 576upx;
		background: #FFFFFF;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.can-withdraw,.authentication-name,.money{
		display: flex;
		justify-content: space-between;
		width: 100%;
		border-bottom: 1upx solid #E6E6E6;
		padding: 32upx 0 36upx 0;
		box-sizing: border-box;
		text-align: right;
	}
	.can-withdraw>text:first-child,.authentication-name>text:first-child,.money>text:first-child{
		color: #333333;
		font-size: 30upx;
	}
	.can-withdraw>text:last-child{
		color: #FF5C46;
		font-size: 36upx;
	}
	.name{
		width: 370upx;
		font-size: 30upx;
	}
	.withdraw-money{
		width: 344upx;
		font-size: 30upx;
	}
	.withdraw-deposit-detail>view:last-child{
		width: 638upx;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		color: #FFFFFF;
		margin: 0 auto;
		margin-top: 100upx;
		background: linear-gradient(#CBEC00,#00A66A);
		border-radius: 44upx;
		font-size: 32upx;
		box-shadow: 0 8upx 16upx 0 rgba(0,166,106,0.4);
	}
	.explain{
		width: 100%;
		height: 442upx;
		background: #FFFFFF;
		margin-top: 20upx;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.explain>view:first-child{
		padding: 30upx 0;
		box-sizing: border-box;
		border-bottom: 0.5px solid #DEDEDE;
		font-size: 30upx;
		color: #333;
		line-height: 42upx;
		display: flex;
	}
	.explain>view:first-child text{
		display: inline-block;
		margin-left: 20upx;
		color: #999999;
		font-size: 24upx;
	}
	.explain>view:last-child{
		margin-top: 22upx;
	}
	.explain>view:last-child>text{
		display: block;
		font-size: 28upx;
		color: #666666;
		margin-top: 30upx;
	}
	.explain>view:last-child>text:first-child{
		margin-top: 0;
	}
</style>
